<!-- 一个展示person基本信息的组件 -->
<template>
  <div class="person-info">
    <header>
      <div class="person-info__avatar">
        <img :src="'http://localhost:8080/api/images/userProfile/' + person.avatar" alt="avatar" />
      </div>
      <div class="person-info__name">{{ person.name }}</div>
      <div class="person-info__id"><b>用户ID: </b>{{ person.id }}</div>
      <div class="person-info__position"><b>地址: </b>{{ person.position }}</div>
      <div class="person-info__graduationSchool">
        <b>毕业学校: </b>{{ person.graduationSchool }}
      </div>
    </header>
    <!-- 下面是简历信息展示 -->
    <ul v-if="resume !== null">
      <li id="ability_radar_chart">
        <p class="radar-title">能力雷达图</p>
        <Echarts :option="option" />
      </li>
      <li class="resume__skills">
        <p><b>职业技能:</b></p>
        <span v-for="(skill, index) in resume.skills" :key="index">{{ skill }}</span>
      </li>
      <li class="resume__desc">
        <p><b>经验描述:</b></p>
        <p>{{ resume.desc }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import Echarts from '@/components/reEcharts/index.vue'
import * as echarts from 'echarts'
const props = defineProps({
  person: {
    type: Object,
    required: true
  },
  resume: {
    type: Object,
    required: false
  }
})
console.log(echarts.graphic)
// 雷达图,包括表达能力,自信心,学习能力,沟通能力,团队协作能力五个维度
const option = ref({
  radar: {
    shape: 'square',
    name: {
      textStyle: {
        color: '#4f4f4f',
        fontSize: 16
      }
    },
    indicator: [
      { name: '表达能力', max: 100 },
      { name: '自信心', max: 100 },
      { name: '学习能力', max: 100 },
      { name: '沟通能力', max: 100 },
      { name: '协作能力', max: 100 }
    ],
    center: ['50%', '50%'],
    radius: '70%',
    axisNameGap: 5,
    splitNumber: 5,
    axisLine: {
      lineStyle: {
        color: '#c0c0c0'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: '#1e83e4'
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(30,131,228,0.3)', 'rgba(30,131,228,0.3)']
      }
    }
  },
  series: [
    {
      name: '能力雷达图',
      type: 'radar',
      symbol: 'circle',
      symbolSize: 6,
      data: [
        {
          value: [90, 80, 70, 85, 90],
          name: '能力雷达图',
          itemStyle: {
            color: 'rgba(255,255,0,3)',
            lineStyle: {
              color: 'rgba(255,255,0,3)'
            }
          },
          label: {
            show: true,
            textStyle: {
              color: 'orange'
            }
          },
          areaStyle: {
            width: 1,
            opacity: 0.5
          }
        }
      ]
    }
  ]
})
</script>

<style scoped>
.person-info {
  padding: 10px;
  border-radius: 10px;
  background-color: #f5f5f5;
  overflow: auto;
}

.person-info header {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  padding: 12px 24px;
  border-radius: var(--shadow-12);
}


.person-info__avatar {
  margin: auto;
  position: relative;
  line-height: 0;
}

.person-info__avatar::after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 6px;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(166, 162, 162, 0.1) 0%, #bcbcbc 100%);
}

.person-info__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--shadow-6);
}

.person-info__name,
.person-info__id,
.person-info__position,
.person-info__graduationSchool {
  font-size: var(--font-16);
  margin-top: 8px;
  line-height: 24px;
}

.person-info__name{
  font-size: 24px;
  font-weight: bold;
  margin: 8px auto;
}

.resume__skills {
  font-size: var(--font-16);
  margin-top: 64px;
}

.resume__skills span {
  margin-right: 10px;
  font-size: var(--font-16);
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 6px;
  border-radius: 10px;
  background-color: #858687;
  color: #fff;
}

.resume__desc {
  font-size: var(--font-16);
  margin-top: 10px;
}

.radar-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}
#ability_radar_chart {
  position: relative;
  height: 300px;
  width: 100%;
}

#ability_radar_chart::after{
  content: '';
  display: block;
  position: absolute;
  inset: -4px;
  background-color: rgba(251, 185, 54, 0.2);
  border-radius: 6px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}
</style>
